<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="/struts-tags" prefix="s" %>
<%@ taglib uri="/sinopac-fn" prefix="fn" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>權限管理平台</title>
		<link rel="stylesheet" href="${fn:url('/form/CSS/tabs.css')}">
		<script type="text/javascript" src="${fn:url('/js/jQuery/jquery-1.8.2.min.js')}"></script>
		<script type="text/javascript" src="${fn:url('/js/jQuery/jquery_DOMWindow.js')}"></script>
		<script type="text/javascript" src="${fn:url('/js/tools/formUtil.js')}"></script>
<script>
	var deleteList = new Array();
	$(document).ready(function() {
		jQuery(".jquery-tabs span:first").addClass("current"); //為第一個span加入 .current 的樣式，預設選取
		jQuery(".jquery-tabs .tabs div:not(:first)").hide(); //ul 不是第一個時隱藏
		jQuery(".jquery-tabs span").click(function() { //若要使滑鼠移到 span 上時觸發函數，將click改為mouseove
			jQuery(".jquery-tabs span").removeClass("current"); //為第一個 span 移除 .current 樣式
			jQuery(this).addClass("current"); //為觸發的 span 加入樣式
			jQuery(".jquery-tabs .tabs div").hide(); //隱藏 ul
			jQuery("." + jQuery(this).attr("id")).fadeIn("slow"); //這句是核心，class(.) 和觸發 span 的ID 一致的 fadeIn(漸顯)
		});
		
		$('#addUsersform input[name=createUser]').click(function(){
			if($('#userId_a').val()==""){
				alert('使用者帳號必輸');
				$('#userId_a').focus();
			}else if($('#userName_a').val()==""){
				alert('使用者名稱必輸');
				$('#userName_a').focus();
			}else{
				$('#addUsersform').submit();
			}
		});
		
		$('#createAdminform input[name=createAdmin]').click(function(){
			if($('#adminId_a').val()==""){
				alert('管理者帳號必輸');
				$('#adminId_a').focus();
			}else if($('#adminName_a').val()==""){
				alert('管理者名稱必輸');
				$('#adminName_a').focus();
			}else if($('#adminPassword_a').val()==""){
				alert('密碼必輸');
				$('#adminPassword_a').focus();
			}else{
				$('#createAdminform').submit();
			}
		});
		
		$('#changePassform input[name=changePassword]').click(function(){
			if($('adminPassword_c').val() == ""){
				alert('原密碼不得為空');
			}else if($('#adminNewPassword_a').val() == ""){
				alert('新密碼不得為空');
			}else if($('#adminNewPasswordConfirm_a').val() == ""){
				alert('確認新密碼不得為空');
			}else if($('#adminNewPassword_a').val() == $('#adminPassword_c').val()){
				alert('原密碼與新密碼一樣，請重新輸入');
				$('#adminNewPassword_a').val('');
				$('#adminNewPasswordConfirm_a').val('');
				$('#adminNewPassword_a').focus();
			}else if($('#adminNewPassword_a').val() != $('#adminNewPasswordConfirm_a').val()){
				alert('新密碼與確認密碼請輸入一樣');
				$('#adminNewPassword_a').val('');
				$('#adminNewPasswordConfirm_a').val('');
				$('#adminNewPassword_a').focus();
			}else{
				$('#changePassform').submit();
			}
		});
		
		if(<s:property value="addFlag"/>){
			alert("使用者已存在，新增失敗!");
		}
		
		if(<s:property value="updateFlag"/>){
			alert("原密碼輸入錯誤!");
		}
		if($('input[name=originalPage]').val() == "admin"){
			jQuery(".jquery-tabs span").removeClass("current"); //為第一個 span 移除 .current 樣式
			jQuery("#tab_2").addClass("current"); //為觸發的 span 加入樣式
			jQuery(".jquery-tabs .tabs div").hide(); //隱藏 ul
			jQuery("." + jQuery("#tab_2").attr("id")).fadeIn("fast"); //這句是核心，class(.) 和觸發 span 的ID 一致的 fadeIn(漸顯)
		}
	});
	function addUsers(){
		$.openDOMWindow({ 
	    	windowSourceID: '#addUsers',
	        height:150,  
	        width:300, 
	        overlay:1, 
	        overlayColor: '#A9A9A9',
	        windowPadding:20,
	        modal:1,
	        borderColor:'steelblue',
	        borderSize:'2', 
	        positionLeft:120, 
	        positionTop:-150,
	    }); 
	}
	function addAdmins(){
		$.openDOMWindow({ 
	    	windowSourceID: '#addAdmin',
	        height:150,  
	        width:300, 
	        overlay:1, 
	        overlayColor: '#A9A9A9',
	        windowPadding:20,
	        modal:1,
	        borderColor:'steelblue',
	        borderSize:'2', 
	        positionLeft:120, 
	        positionTop:-150,
	    }); 
	}
	function changePassword(){
		$.openDOMWindow({ 
	    	windowSourceID: '#changePassword',
	        height:150,  
	        width:300, 
	        overlay:1, 
	        overlayColor: '#A9A9A9',
	        windowPadding:20,
	        modal:1,
	        borderColor:'steelblue',
	        borderSize:'2', 
	        positionLeft:120, 
	        positionTop:-150,
	    });
	}
	function deleteUsers(){
		var flag = false;
		var message = "即將刪除以下使用者，請確認。\n";
		$('#table1 tr').each(function(i){
			if($(this).find('#deleteFlag').attr("checked")){
				var userid = $(this).find('td').eq(0).text();
				var username = $(this).find('td').eq(1).text();
				var roles = $(this).find('td:eq(2) :selected').text();
				message += userid+"\t"+username+"\t"+roles+"\n";
				flag = true;
			}
		});
		var f = $('#form1');
		if(flag){
			if(confirm(message)){
				f.prop('action',"${fn:url('/RightsManagement/deleteUsers')}").submit();
			}else{
				deleteList = new Array();
				f.prop('action',"${fn:url('/RightsManagement/userList')}").submit();
				//$('#form1').attr('action','userList').submit();
			}
		}else{
			f.prop('action',"${fn:url('/RightsManagement/deleteUsers')}").submit();
			//$('#form1').attr('action','deleteUsers').submit();
		}
	}
	function cancel(obj){
		$('#form1 input[name=originalPage]').val(obj);
		$('#form1').attr('action','userList').submit();
	}
	function deleteAdmins(){
		var flag = false;
		var message = "即將刪除以下管理者，請確認。\n";
		$('#table2 tr').each(function(i){
			if($(this).find('#deleteFlag').attr("checked")){
				var userid = $(this).find('td').eq(0).text();
				var username = $.trim($(this).find('td').eq(1).text());
				var roles = $.trim($(this).find('td:eq(2)').text());
				message += userid+"\t"+username+"\t"+roles+"\n";
				flag = true;
			}
		});
		var f = $('#form1');
		if(flag){
			if(confirm(message)){
				f.prop('action',"${fn:url('/RightsManagement/deleteAdmins')}").submit();
				//$('#form1').attr('action','deleteAdmins').submit();
			}else{
				deleteList = new Array();
				$('#form1 input[name=originalPage]').val('admin');
				f.prop('action',"${fn:url('/RightsManagement/userList')}").submit();
				//$('#form1').attr('action','userList').submit();
			}
		}
	}
</script>
<body>
	<s:hidden name="originalPage"/>
	<div id="addUsers" style="display: none;">
		<s:form action="addUsers" id="addUsersform">
			<table width="300" height="150" align="center">
				<tr>
					<td><s:textfield name="userAccount" label="請輸入使用者帳號" id="userId_a"/></td>
				</tr>
				<tr>
					<td><s:textfield name="userName" label="請輸入使用者名稱" id="userName_a"/></td>
				</tr>
				<tr>
					<td>
						<s:select list="comMap" name="user_roles" label="請設定角色　　　" id="roles_a" headerKey="1"></s:select>
					</td>
				</tr>
				<tr>
					<td align="center"><input type="button" name="createUser" value="確定"></td>
					<td align="center"><input type="button" class="closeDOMWindow" value="取消"></td>
				</tr>
				<tr>
					<td><s:hidden value="message" id="message_a"></s:hidden></td>
				</tr>
			</table>
		</s:form>
	</div>
	
	<div id="addAdmin" style="display: none;">
		<s:form action="createAdmin" id="createAdminform">
			<table width="300" height="150" align="center">
				<tr>
					<td><s:textfield name="adminId" label="請輸入管理者帳號" id="adminId_a"/></td>
				</tr>
				<tr>
					<td><s:textfield name="adminName" label="請輸入管理者名稱" id="adminName_a"/></td>
				</tr>
				<tr>
					<td><s:password name="adminPassword" label="請輸入密碼　　　" id="adminPassword_a"/></td>	
				</tr>
				<tr>
					<td align="center"><input type="button" name="createAdmin" value="確定"></td>
					<td align="center"><input type="button" class="closeDOMWindow" value="取消"></td>
				</tr>
			</table>
		</s:form>
	</div>
	
	<div id="changePassword" style="display: none;">
		<s:form action="updateAdminPassword" id="changePassform">
			<table style="width: 100; height: 80" align="center">
				<tr align="left">
					<td><font size="4"><s:property value="userName"/>進行密碼變更</font></td>
				</tr>
				<tr>
					<td><s:password name="adminPassword" label="請輸入原密碼　　" id="adminPassword_c"/></td>
				</tr>
				<tr>
					<td><s:password name="adminNewPassword" label="請輸入新密碼　　" id="adminNewPassword_a"/></td>
				</tr>
				<tr>
					<td><s:password name="adminNewPasswordConfirm" label="請再次確認新密碼" id="adminNewPasswordConfirm_a"/></td>	
				</tr>
				<tr>
					<td align="center"><input type="button" name="changePassword" value="確定"></td>
					<td align="center"><input type="button" class="closeDOMWindow" value="取消"></td>
				</tr>
			</table>
		</s:form>
	</div>	
	<%@ include file="/form/include/adminTitle.jsp" %>
	<form id="form1"  method="post">
	<s:hidden name="originalPage"/>
		<div class="jquery-tabs">
			<p>
				<span id="tab_1">使用者管理</span>
				<span id="tab_2">系統管理者</span>
			</p>
			<div class="tabs" style="border: #999 solid;">
				<div class="tab_1">
					<s:set id="deleteList" name="deleteList"/>
					<table align="center">
						<tr><td><a onclick="addUsers()" href="#">新增使用者</a></td></tr>
					</table>
					<s:if test="userList.size()>0">
					<table class="table-style" id="table1" align="center">
						<tr>
							<th>使用者</th>
							<th>使用者名稱</th>
							<th>角色</th>
							<th>刪除</th>
						</tr>
						<s:iterator value="userList" status="row" var="user">
							<tr>
								<td><s:property value="userid"/></td>
								<td><s:property value="username"/></td>
								<td>
									<s:select name="deleteList[%{#row.index}].user_roles" list="comMap" theme="simple" value="user_roles" cssStyle="width: 100%"/>
								</td>
								<td align="center"><s:checkbox id="deleteFlag" value="deleteFlag" name="deleteList[%{#row.index}].deleteFlag" theme="simple"/></td>
								<td style="display:none" align="center">
	           						<s:hidden id="user_id%{#row.index+1}" name="deleteList[%{#row.index}].userid" value="%{#user.userid}"/>
	           						<s:hidden id="user_name%{#row.index+1}" name="deleteList[%{#row.index}].username" value="%{#user.username}"/>
	           						<!--
	           						<s:hidden id="user_rol%{#row.index+1}" name="deleteList[%{#row.index}].user_roles" value="%{#user_roles}"/>
	           						<s:hidden id="user_delete%{#row.index+1}" name="deleteList[%{#row.index}].deleteFlag" value="%{#deleteFlag}"/>
	           						-->
	          					</td>
							</tr>
						</s:iterator>
						<tr height="20"/>
						<tr>
							<td colspan="2" align="center" style="background-color: white">
								<button onclick="deleteUsers()">確定</button>
							</td>
							<td colspan="2" align="center" style="background-color: white">
								<input type="button" onclick="cancel('user')" value="取消"/>
							</td>
						</tr>
					</table>
					</s:if>
				</div>
				<div class="tab_2">
					<table align="center">
						<tr>
							<td><a onclick="addAdmins()" href="#">新增系統管理者</a></td>
							<td width="10"/>
							<td><a onclick="changePassword()" href="#">密碼變更</a></td>
						</tr>
					</table>
					<s:if test="adminList.size()>0">
					<table class="table-style" id="table2" align="center">
						<tr>
							<th>使用者</th>
							<th style="width: 150px">使用者名稱</th>
							<th>角色</th>
							<th>刪除</th>
						</tr>
						<s:iterator value="adminList" status="row" var="admin">
							<tr>
								<td><s:property value="userid"/></td>
								<td><s:property value="username"/></td>
								<td>系統管理者</td>
								<td align="center"><s:checkbox id="deleteFlag" value="deleteFlag" name="deleteAdmins[%{#row.index}].deleteFlag" theme="simple"/></td>
								<td style="display:none" align="center">
	           						<s:hidden id="user_id%{#row.index+1}" name="deleteAdmins[%{#row.index}].userid" value="%{#admin.userid}"/>
	           						<s:hidden id="user_name%{#row.index+1}" name="deleteAdmins[%{#row.index}].username" value="%{#admin.username}"/>
	          					</td>
							</tr>
						</s:iterator>
						<tr height="20"/>
						<tr>
							<td colspan="4" align="center" style="background-color: white">
								<button onclick="deleteAdmins()">確定</button>
								<input type="button" onclick="cancel('admin')" value="取消"/>
							</td>
						</tr>
					</table>
					</s:if>
				</div>
			</div>
		</div>
	</form>
</body>
</html>